import React,{useState,useEffect} from 'react'
import {Menu,Layout,Col,Row} from 'antd';
import {Outlet,Link} from 'react-router-dom'
import * as icons from '@ant-design/icons'
import './index.scss';
import {useNavigate} from 'react-router-dom';
import store from '../../store';
import {observer} from 'mobx-react';
const { Header, Sider, Content } = Layout;  


// 页面
const Home = ()=>{
    const {Role} = store;
    const navgiate = useNavigate();
    // 当前时间   
    const [time,setTime]=useState('')
    var str = "星期" + "日一二三四五六".charAt(new Date().getDay())
    // 菜单
    const [menu,setMenu] = useState([]);
    useEffect(()=>{
        // 获取登录人员信息
        Role.getLogin();
        // 获取菜单
        setInterval(()=>{
            setTime( new Date().toLocaleTimeString())        
        },1000)        
        let menu = JSON.parse(sessionStorage.getItem('menu'));
        let list = menu.map(item=>{
            let mm = icons[item.icon];
            if(item.id===0){
                return {
                    key: item.id,
                    icon: React.createElement(mm),
                    label: <Link to={item.url}>{item.label}</Link>
                }
            }else{
                return {
                    key: item.id,
                    icon: React.createElement(mm),
                    label: item.label,
                    children: item.children.map(itemChildren=>{
                        return {
                            key: itemChildren.id,
                            label: <Link to={itemChildren.url}>{itemChildren.txt}</Link>
                        }
                    })
                }
            }            
        })
        setMenu(list)
    },[])
    const [collapsed, setCollapsed] = useState(false);
    const [showThis,setShow]=useState(false);
    const changeSta =()=>{
        setCollapsed(!collapsed) 
        setShow(!showThis)
    }
    // 退出登录
    const logOut=()=>{
        let token = sessionStorage.getItem('token')
        fetch('http://42.192.83.237:8080/empl/logout',{method:'POST',headers:{token}}).then(resp=>{
            if(resp.status===200){
                return resp
            }
        }).then(data=>{
            navgiate('/login');
            sessionStorage.removeItem('token');
            sessionStorage.removeItem('userInfo');
            sessionStorage.removeItem('power');
            sessionStorage.removeItem('oneMenu');
            sessionStorage.removeItem('menu');
        })
    }
    return <>
    <Layout>
            {/* 导航栏 */}
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className={showThis?'a':'b'} >
                    <div className="home_top">
                        <h3>早教运营中心</h3>
                        <Row className='row'>
                            <Col span={8} className="nameCss"><span>{str}</span></Col>
                            <Col span={8}>{time}</Col>
                        </Row>
                    </div>
                </div>
                <Menu
                    mode="inline"
                    theme="light"
                    defaultSelectedKeys={['1']}
                    items={menu}
                    className = 'home_menu'
                />
            </Sider>
            <Layout className="site-layout">
                {/* 头部 */}
                <Header
                className="site-layout-background"
                >
                {React.createElement(collapsed ? icons.MenuUnfoldOutlined : icons.MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: () => {changeSta()},
                })}
                <div className='home_person'>
                    <img src={require("../../static/images/background.jpg")} alt="" />
                    <span>{Role.loginper.username}</span>
                    <button onClick={()=>{logOut()}} className="logOut">退出登录</button>
                </div>
                </Header>
                {/* 内容 */}
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 500,
                    }}
                    >
                    <Outlet />
                    </Content>
                </Layout>
        </Layout>
    </>
}
export default observer(Home)